<template>
  <page-layout>
    <a-card>
      <a-row>
        <a-col :span="24">
          <a-button
            type="primary"
            v-if="btnIsPowerByCode('college-manage:add')"
            @click="editCourse"
          >
            修改
          </a-button>
        </a-col>
        <a-col :span="6">
          <div style="margin-top: 15px">
            <span>是否上架：</span>
            <a-switch
              v-model:checked="form.data.state"
              checkedValue="yes"
              unCheckedValue="no"
              @change="switchChange"
            />
          </div>
        </a-col>
      </a-row>
    </a-card>
    <readonly-form :fields="formData.fields" :data="formData.data"/>
    <readonly-form :fields="form.fields" :data="form.data" />
  </page-layout>
</template>

<script>
import { selectById, save } from "@/api/module/curriculum-price";
import { useI18n } from "vue-i18n";
import { reactive, onMounted, onActivated, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getBase64 } from "@/tools/common";
import { message } from "ant-design-vue";
import { btnIsPowerByCode } from "@/tools/common";
import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import moment from 'moment'
import { isEmpty } from "@/tools/common";

export default {
  name: "curriculum-price-detail",
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const router = useRouter();

    const previewImage = ref("");
    const previewVisible = ref(false);
    // 课程
    const formData = reactive({
      fields: [
        {
          title: '基础信息',
          fields: [
            { span: 6, title: '编码', field: 'code' },
            { span: 6, title: '学校名称', field: 'schName' },
            { span: 6, title: '学科类别', field: 'disciplineName' },
            { span: 6, title: '课程代码', field: 'courseCode' },
            { span: 6, title: '课程名称', field: 'courseName' },
            { span: 6, title: '学分', field: 'credit' },
            { span: 6, title: '课程类型', field: 'typeId' },
            { span: 6, title: '课程以往代码', field: 'coursePastCode' },
            // { span: 6, title: '课程唯一码', field: 'courseOnlyCode' },
            { span: 10, title: '课程描述', field: 'describes' },
          ],
        },
        {
          title: '前置课程',
          fields: 'preCurriculumRelationshipList',
          type: 'array',
          childFields: [
            { span: 6, title: '课程名称', field: 'courseName' },
            { span: 6, title: '前置课程关系', field: 'relationship' },
          ]
        },
        {
          title: 'SOR',
          fields: 'cbiSorList',
          type: 'array',
          childFields: [
            { span: 6, title: '学校名称', field: 'schName' },
            { span: 6, title: '课程代码', field: 'courseCode' },
            { span: 6, title: '课程名称', field: 'courseName' },
            { span: 6, title: '审核通过时间', field: 'sorAuditTime' }
          ]
        },
      ],
      data: {},
      dict: {},
    })
    // 课程班次
    const form = reactive({
      fields: [
        {
          title: "开课信息",
          fields: [
            { span: 6, title: "项目名称", field: "projectName" },
            // { span: 6, title: "课程名称", field: "cbiName" },
            { span: 6, title: "学校班级代码", field: "schShiftCode" },
            { span: 6, title: "最多招生人数", field: "maximumEnrollment" },
            { span: 6, title: "价格", field: "price" },
            { span: 6, title: "教授", field: "professorName" },
            { span: 6, title: "助教", field: "taName" },
            { span: 6, title: "教材", field: "teachingName" },
            { span: 6, title: "开始注册日期", field: "startRegisterTime" },
            { span: 6, title: "截止注册日期", field: "endRegisterTime" },
            { span: 6, title: "上课地点", field: "classPlace" },
            { span: 6, title: "课程详情链接", field: "addressUrl" },
          ]
        },
        {
          title: "上课时段",
          fields: [
            { span: 6, title: "课程形式", field: "shape" },
            { span: 6, title: "学校时区", field: "timeZone" },
            { span: 6, title: "开始日期", field: "startTime" },
            { span: 6, title: "结束日期", field: "endTime" },
            { span: 6, title: "课程时长(周)", field: "duration" },
            { span: 18, title: "上课时间", field: "courseHours" },
            { span: 12, title: "备注", field: "remark" },
          ]
        },
      ],
      data: {},
      dict: {}
    });

    const handlePreview = async (file) => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }

      previewImage.value = file.url || file.preview
      previewVisible.value = true
    }

    const handleCancel = () => previewVisible.value = false

    const editCourse = () => {
      router.push({
        path: "/university/curriculum-price/add",
        query: route.query
      });
    };
    const getDataByDict = (data, dictKey) => {
      if (isEmpty(data)) return "";
      const item = form.dict[dictKey].find((v) => v.value == data);
      if (isEmpty(item)) return "";
      return item.label;
    };
    const switchChange = async (value) => {
      form.data.state = value
      const response = await save(form.data)
      const { success, code, msg } = response
      if (code === 500) {
        message.warning(msg)
      } else if (code == 200 && success) {
        message.success('操作成功')
      }
    }
    onActivated(async () => {
      form.dict = await getDictByCodesReturnObj([
        dictEnum.FOLLOW_PROGRESS,
        dictEnum.WEEK,
        dictEnum.ENABLE,
        dictEnum.TIME_ZONE,
        dictEnum.COURSE_TYPE,
        dictEnum.SHAPE,
        dictEnum.COURSE_SHIFT_SHAPE,
        dictEnum.COURSE_RELATION,
      ]);
      let response = await selectById({ id: route.query.id });

      if (response.code === 500) {
        return message.error("获取详情失败");
      }
      response.data.startRegisterTime = response.data.startRegisterTime
                                      ? moment(response.data.startRegisterTime).format('YYYY-MM-DD')
                                      : ''
      response.data.endRegisterTime = response.data.endRegisterTime
                                      ? moment(response.data.endRegisterTime).format('YYYY-MM-DD')
                                      : ''
      response.data.startTime = response.data.startTime
                                      ? moment(response.data.startTime).format('YYYY-MM-DD')
                                      : ''
      response.data.endTime = response.data.endTime
                                      ? moment(response.data.endTime).format('YYYY-MM-DD')
                                      : ''
      response.data.timeZone = getDataByDict(response.data.timeZone, dictEnum.TIME_ZONE)
      response.data.shape = getDataByDict(response.data.shape, dictEnum.COURSE_SHIFT_SHAPE)
      console.log('response.data: ', response.data);
      form.data = response.data
      formData.data = response.data.courseBasicInfo || {}


      formData.data.firstCourseStarttime = formData.data.firstCourseStarttime
                                          ? moment(formData.data.firstCourseStarttime).format('YYYY-MM-DD')
                                          : ''
      formData.data.courseLastReviewtime = formData.data.courseLastReviewtime
                                          ? moment(formData.data.courseLastReviewtime).format('YYYY-MM-DD')
                                          : ''
      formData.data.courseLastOpentime = formData.data.courseLastOpentime
                                          ? moment(formData.data.courseLastOpentime).format('YYYY-MM-DD')
                                          : ''
      formData.data.typeId = formData.data.typeId
                          ? getDataByDict( formData.data.typeId, dictEnum.COURSE_TYPE)
                          : '';
      formData.data.cbiSorList && formData.data.cbiSorList.map(item => {
        item.sorAuditTime = item.sorAuditTime
                                            ? moment(item.sorAuditTime).format('YYYY-MM-DD')
                                            : ''
                                            return item

      })
      formData.data.preCurriculumRelationshipList && formData.data.preCurriculumRelationshipList.map(item => {
        item.relationship = item.relationship
                                            ? getDataByDict(item.relationship, dictEnum.COURSE_RELATION)
                                            : ''
                                            return item
      })
    });

    return {
      previewVisible,
      previewImage,
      form,
      formData,
      t,
      editCourse,
      handleCancel,
      handlePreview,
      btnIsPowerByCode,
      switchChange
    };
  }
};
</script>

<style lang="less" scoped>
.thumb-item {
  width: 102px;
  height: 102px;
  background-size: cover;
  background-position: center center;
}
</style>
